import React, { useEffect, useState } from 'react'
import { NavBar, SearchBar, Card, Tag, IndexBar, List, Toast } from 'antd-mobile'
import { LocationFill, DeleteOutline } from 'antd-mobile-icons'
import http from './api/http'


const App = () => {
  const [cityList, setCityList] = useState([])
  const [hotList, setHotList] = useState([])
  const [searchList, setSearchList] = useState([])
  const [hitList, setHitList] = useState(
        JSON.parse(localStorage.getItem("hitList")) || []
    )

  const getData = async () => {
    const res = await http.get("/api/city")
    console.log(res.data.data);
    setCityList(res.data.data.city)
    setHotList(res.data.data.hotCities)
  }

  useEffect(() => {
    getData()
  }, [])


  const getSearch = async (wd) => {
    if (wd === "") {
      Toast.show("请输入内容");
      setSearchList([]);
      return;
    } else {
      const res = await http.get("/api/city/search",
        {
          params: { wd }
        })
      const { data, code, message } = res.data
      if (code == 200) {
        setSearchList(data)
      } else {
        Toast.show(message);
      }
    }


    const index = hitList.lastIndexOf(wd)
    if (index > -1) {
      hitList.splice(index, 1)
    }
    hitList.unshift(wd)
    setHitList(hitList)

    localStorage.setItem("hitList", JSON.stringify(hitList));
  }

  const hidei = () => {
    setHitList([])
    localStorage.setItem("hitList", JSON.stringify(hitList));
  }
  return (
    <div>
      <NavBar>
        <SearchBar placeholder='请输入内容' onChange={(val) => getSearch(val)} />
      </NavBar>
      {searchList.length > 0 ? (
        <div className="box">
          <List>
            {
              searchList.map((v, i) => {
                return <List.Item key={i}>
                  {v.name}
                </List.Item>
              })
            }
          </List>
        </div>
      ) : ("")}

      <div>
        <Card title="历史搜索"
          extra={<div><DeleteOutline onClick={() => hidei()} /></div>}
        >
         {
          hitList.map((v,i)=>{
             return <Tag key={i} style={{ margin: 5 }}>{v.name}</Tag>
          })
         }
        </Card>
      </div>
      <div>
        <Card title={<div>当前城市:<LocationFill />
          <span>{hotList.length > 0 && hotList[0].name}</span>
        </div>}>
        </Card>
      </div>

      <div>
        <Card title="热门城市">
          {
            hotList.length > 0 &&
            hotList.map((v, i) => {
              return <Tag key={i} style={{ margin: 5 }}>{v.name}</Tag>
            })
          }
        </Card>
      </div>

      <div>
        <Card title="城市列表">
          <div style={{ height: window.innerHeight }}>
            <IndexBar>
              {cityList.length > 0 && cityList.map((v) => {
                return (
                  <IndexBar.Panel
                    index={v.initial}
                    title={`${v.initial}`}
                    key={`${v.initial}`}
                  >
                    <List>
                      {v.list.map((item, index) => (
                        <List.Item key={index}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
            </IndexBar>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default App
